<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	body {
		background: #F7F9F9;
	}
</style>
</head>

<body>
<div id="app">
<div class="postEvaBox bg-white">
	<div class="postEvaList">
		<div class="item aui-margin-b-0">
			<div class="avatar"><img :src="comment.user_avatar" alt=""></div>
			<div class="aui-flex-col aui-flex-middle aui-flex-between">
				<div class="evaName">{{comment.user_nickname}}</div>
				<div class="likeBtn" :class="{'on': comment.is_like == 1}" v-tap="[togEvaLike,comment]">{{ comment.comment_like_count }}</div>
			</div>
			<div class="evaDate">{{ Date.parse(comment.comment_addtime).toString('MM-dd HH:mm') }}</div>
			<div class="evaDetail" v-text="comment.comment_content"></div>
		</div>
	</div>
</div>
<div class="postEvaBox postReplyBox" v-if="comment.reply.length">
	<div class="postEvaList lastNoMargin">
		<div class="item aui-border-b" v-for="reply in comment.reply">
			<div class="avatar"><img :src="reply.user_avatar" alt=""></div>
			<div class="aui-flex-col aui-flex-middle aui-flex-between">
				<div class="evaName">{{reply.user_nickname}}</div>
				<div class="likeBtn" :class="{'on': reply.is_like == 1}" v-tap="[togEvaLike,reply]">{{reply.comment_like_count}}</div>
			</div>
			<div class="evaDate">{{ Date.parse(reply.comment_addtime).toString('MM-dd HH:mm') }}</div>
			<div class="evaDetail">{{reply.comment_content}}</div>
		</div>
	</div>
	<div class="btmInfoBtn">已经到底啦</div>
	<div id="footer" style="height: 50px;"></div>
</div>
</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/dom7.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/vue-tap.js"></script>
<script type="text/javascript" src="../../script/date.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var vm;
var vuedata = {
	userId: '',
	comment_id: '',
	comment: {
		reply: []
	}
};
vm = new Vue({
	el: '#app',
	data: vuedata,
	methods: {
		//评论点赞
		togEvaLike: function(obj){
			api.ajax({
				url: BASE_URL + 'App/Article/commentLike',
				method: 'post',
				data: {
					values: {
						userid: vuedata.userId,
						comment_id: obj.comment_id,
					}
				}
			},function(ret,err){
				if (ret && ret.code == 1) {
					api.sendEvent({
						name: 'postLikeEvent'
					});
					if(ret.msg == '取消成功'){
						obj.is_like = -1;
						obj.comment_like_count--;
					}else{
						obj.is_like = 1;
						obj.comment_like_count++;
					}
					toast(ret.msg);
				} else {
					toast('操作失败');
				};
			});
		}
	}
});
apiready = function() {
	api.parseTapmode();
	vuedata.userId = getUserId();
	vuedata.comment_id = api.pageParam.comment_id;
	openChatFooter();
	getData();

	//监听发表评论后刷新页面
	api.addEventListener({
		name: 'replySendEvent'
	}, function(ret, err){
		getData('scrollBtm');
	});
};

function getData(type){
	api.ajax({
		url: BASE_URL + 'App/Article/articleReplyLists',
		method: 'post',
		data: {
			values: {
				userid: vuedata.userId,
				comment_id: vuedata.comment_id
			}
		}
	},function(ret,err){
		if (ret && ret.code == 1) {
			vuedata.comment = ret.data;
			api.execScript({
				script:'changeData("#num","'+ vuedata.comment.reply.length +'");'
			});
			if(type == 'scrollBtm'){
				//发布新评论后 刷新页面 并滚动到页面底部
				setTimeout(function(){
					api.pageDown({
						bottom: true
					});
				},100);
			}
		}
	});
}


//打开评论footer
function openChatFooter(){
	api.openFrame({
		name: 'chat_footer',
		url: 'widget://html/chat_footer.html',
		rect: {
			x: 0,
			y: api.winHeight - 50,
			w: 'auto',
			h: 50
		},
		bounces: false,
		pageParam: {
			article_id: api.pageParam.article_id,
			article_userid: api.pageParam.article_userid,
			comment_id: api.pageParam.comment_id
		}
	});
}
</script>
</html>
